<template>
    <div id="need">
        <div id="usr">
            <img :src="image" alt="图片加载不出来了QAQ">
            <div id="name">{{username}}</div>
            <div id="time">{{needTime}}</div>
        </div>
        <div id="post">
            {{description}}
        </div>
        <!-- <div id="usr">
            <img src="../assets/img/head.png" alt="图片加载不出来了QAQ">
            <div id="name">username</div>
            <div id="time">2021-5-26</div>
        </div>
        <div id="post">
            lalala, I want a ddl cleaner!
        </div> -->
        <div class="op" v-if="$store.state.isLogin">
            <router-link :to="{path:'/userinfo', query: {username: this.username, msg: 1}}">
                <el-button>和ta联系！</el-button>
            </router-link>
        </div>
        <div class="op" v-else>
            <router-link to="/login">
                <el-button>和ta联系！</el-button>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        image: '',
        username: '',
        needTime: '',
        description: '',
    },
    data(){
        return {
            testname: 'zj'
        }
    }
}
</script>

<style scoped>

#need {
    border: 1px solid rgb(204,204,204);
    border-bottom: 2px solid rgb(204,204,204);
    height: 180px;
    width: 900px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: space-between;
    margin: 20px auto;
    background-color: #fff;
}

#usr {
    display: flex;
    justify-content: flex-start;
}

#name, #time {
    line-height: 24px;
    margin-left: 20px;
}

#time {
    color: #ccc;
    font-size: 12px;
    line-height: 27px;
}

#post {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

#need img{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    overflow: hidden;
}

#need .el-button {
    margin-left: 750px;
}

.el-button {
  background-color: rgb(255,0,54);
  color: #fff;
}

</style>